import React, { useState } from 'react';
import '../scss/fp/register.css';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';

import { user_register } from "../tools/api";

function Register(props) {
    
    var [ username , setUsername ] = useState();
    
    var [ password , setPassword ] = useState();
    
    var [ select , setSelect ] = useState();
    

    var push = useNavigate();
    
    // 注册 普通管理员
    const registerPutong = () => {
        if( /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test( username ) == false ) {
            message.open({ type: 'info', content: '请输入正确的账号和密码!' });
        } else {
            
            user_register({ username : username , password : password , name : select , permissions : [1,2,3,4] } ).then(
                response => {  
                    message.open({ type: 'success', content: '注册成功，请登录!' });
                    push('/login')
                } 
            )
        }
    }

    // 注册 超级管理员
    const registerChaoji = () => {
       //-----🍌---🍌---🍌-----
       if( /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test( username ) == false ) {
        message.open({ type: 'info', content: '请输入正确的账号和密码!' });
    } else {
        
        user_register({ username : username , password : password , name : select , permissions : [1,2,3,4,5,6] } ).then(
            response => {  
                message.open({ type: 'success', content: '注册成功，请登录!' });
                push('/login')
            } 
        )
    }
    }

    // 游客身份进入
    const touristClick = () => {
       //-----🥐---🥐---🥐-----
       localStorage.setItem('token','这是一个游客的 token');
       localStorage.setItem('userinfo',JSON.stringify( { username:'游客' , password:'无', name:'游客', permissions:[ 1 ] } ));
       push('/index')
    }

    const usernameValue = (e) => {
         setUsername(e.target.value)
    }
        
    const passwordValue = (e) => {
         setPassword(e.target.value)
    }

    const selectQuanxian = (e) => {
       setSelect(e.target.value)
    }
    return (
        <>
    <div className="body">  
        <div className="login-box">
            <div className="1" id="1">
            </div>
            <div className="input-box">
                <h1 style={{marginLeft:55,marginBottom:30}}>ERP 管理系统</h1>
                <input type="text" placeholder="请输入账号" onChange={ usernameValue } value={ username } />
                <input type="password"  placeholder="请输入密码" onChange={ passwordValue } value={ password }  />

                <select onClick={ selectQuanxian }>
                    <option value="请选择权限">请选择权限</option>
                    <option value="普通管理员">普通管理员</option>
                    <option value="超级管理员">超级管理员</option>
                </select>

               <button className='fixed-button' onClick={ touristClick }>游客</button>
               <button className='zhuce' onClick={ registerPutong }>注册普通管理员</button>
                <button className='zhuce' onClick={ registerChaoji }>注册超级管理员</button>
            </div>
        </div>
     </div>
        </>
    );
}

export default Register;